<template>
  <el-container>
    <el-main>
      <el-table
        id="table"
        ref="multipleTable"
        :data="tableData"
        row-key="roleId"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
        <el-table-column type="index" :index="indexMethod" label="序号" width="100"></el-table-column>
        <!-- <el-table-column prop="userManagerId" v-show="false" label="姓名" width="120"></el-table-column> -->
        <el-table-column prop="roleCode" label="角色编号" width="150"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="150"></el-table-column>
        <el-table-column prop="roleCreateTime" :formatter="formatDate1" label=" 生效日期" width="150"></el-table-column>
        <el-table-column prop="roleInvalidTime" :formatter="formatDate2" label="失效日期" width="150"></el-table-column>
        <el-table-column prop="roleStatus" :formatter="formatStatus" label="状态" width="70"></el-table-column>
        <slot></slot>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  components: {},
  props: ["selectRoleId", "allRole", "sendSelectData"],
  data() {
    return {
      tableData: [],
      page: {
        size: 5,
        current: 1,
        total: 0,
      },
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
      this.$emit("handleSelections", this.multipleSelection);
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.roleList();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.roleList();
    },
    formatStatus(row, column) {
      return row.roleStatus == 1 ? "有效" : "无效";
    },
    indexMethod(index) {
      return (this.page.current - 1) * this.page.size + index + 1;
    },
    formatDate1(row) {
      var date = new Date(row.roleCreateTime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() / 10 > 1 ? date.getDate() : "0" + date.getDate();
      return Y + M + D;
    },
    formatDate2(row) {
      var date = new Date(row.roleInvalidTime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() / 10 > 1 ? date.getDate() : "0" + date.getDate();
      return Y + M + D;
    },

    roleList() {
      const vm = this;
      const p = new URLSearchParams();
      p.append("pageSize", vm.page.size);
      p.append("pageNum", vm.page.current);
      if (vm.sendSelectData) {
        p.append("roleName", vm.sendSelectData.name);
        let status;
        if (vm.sendSelectData.status == "有效") {
          status = 1;
        } else if (this.sendSelectData.status == "无效") {
          status = 0;
        } else {
          status = -1;
        }
        p.append("roleStatus", status);
      }
      vm.$http({
        method: "post",
        url: "/role/roleSelectByForm",
        data: p,
      }).then((res) => {
        vm.tableData = res.data.list;
        vm.page.total = res.data.total;
        if (vm.selectRoleId != null) {
          vm.$nextTick(function () {
            for (let i = 0; i < vm.tableData.length; i++) {
              for (let j = 0; j < vm.selectRoleId.length; j++) {
                if (vm.tableData[i].roleId == vm.selectRoleId[j]) {
                  this.$refs.multipleTable.toggleRowSelection(
                    vm.tableData[i],
                    true
                  );
                }
              }
            }
          });
        }
      });
    },
  },
  mounted() {
    this.roleList();
    this.$emit("page", this.page);
  },
  watch: {
    allRole: {
      handler(nval, oval) {
        this.tableData = nval.data;
        this.page.total = nval.data.length;
      },
    },
    sendSelectData: {
      handler(nval, oval) {
        this.roleList();
      },
      deep: true,
    },
  },
};
</script>
<style lang='less' scoped>
</style>